<template>
  <div>
    <el-dialog
      title="车辆明细"
      width=" 700px"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form" size="small">
        <el-form-item label="车牌号" :label-width="formLabelWidth">
          <el-input
            style="width: 400px"
            v-model="form.name"
            autocomplete="off"
            placeholder="请输入车牌号"
          ></el-input>
        </el-form-item>
        <el-form-item label="车主" :label-width="formLabelWidth">
          <el-input
            style="width: 400px"
            v-model="form.name"
            autocomplete="off"
            placeholder="请输入车主"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input
            style="width: 400px"
            v-model="form.name"
            autocomplete="off"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="车辆照片" :label-width="formLabelWidth">
          <div class="demo-image">
            <div class="demo-image__placeholder">
              <div class="block">
                <el-image :src="src">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </div>
            </div>
            <div class="demo-image__placeholder">
              <div class="block" style="margin-left: 20px">
                <el-image :src="src">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </div>
            </div>
          </div>
        </el-form-item>
 
      </el-form>

      <!-- <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="small"
          @click="dialogFormVisible = false"
          >保存</el-button
        >
      </div> -->
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "70px",
      form: {},
      src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
    };
  },
  methods: {
    open(item) {
      this.dialogFormVisible = true;
    },
 
  },
};
</script>

<style lang="less" scoped>
.addbtn {
  margin-bottom: 22px;
}
.container {
  padding: 10px;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.el-pagination {
  position: absolute;
  right: 5px;
  margin-top: 15px;
}
.state0 {
  color: #00bc15;
}
.state1 {
  color: #fb1a07;
}
.state2 {
  color: #0f40f5;
}
.state3 {
  color: #e99d42;
}
.state4 {
  color: #9a9a9a;
}
.delete {
  color: #fb1a07;
}
.demo-image {
  display: flex;
}
.block {
  width: 180px;
  height: 100px;
  overflow: hidden;
}
::v-deep .el-dialog__body {
  padding: 30px 90px 10px !important;
}
::v-deep .el-dialog__footer {
  text-align: center;
}
</style>
